/* 
  目标：状态提升-兄弟组件通信
  步骤:
    1. 把Husband子组件中的state，提升到父组件App。
    2. 使用props给Husband传money
    3. Husband通过子传父技术，去修改money
    4. Wife通过子传父技术，去修改money
*/

import React, { Component } from 'react';
import Husband from '../components/Husband';
import Wife from '../components/Wife';

export default class App extends Component {
  /* 
    1. 把Husband子组件中的state，提升到App。


   
  */
  state = {
    money: 0,
  };

  /* 赚钱方法 */
  handleMakeMoney = () => {
    this.setState({ money: this.state.money + 1000 });
  };

  handleCostMoney = () => {
    this.setState({ money: this.state.money - 1000 });
  };

  render() {
    return (
      <div>
        <h1 style={{ textAlign: 'center' }}>家庭存款：{this.state.money}</h1>
        {/*     2. 使用props给Husband传money */}

        {/* 3. Husband通过子传父技术，去修改money */}
        <Husband money={this.state.money} handleMakeMoney={this.handleMakeMoney}></Husband>
        <hr />
        {/* 4. Wife通过子传父技术，去修改money */}
        <Wife handleCostMoney={this.handleCostMoney}></Wife>
      </div>
    );
  }
}
